<template>
	<!-- 五级地址联动组件 2023-07-20  -->
	<view>
		<picker  @change="bindPickerChange" @columnchange="columnchange" mode ='multiSelector' :value="pickerValue" :range="array" range-key="name" >
			<slot></slot>
		</picker>
	</view>
</template>

<script>
	import {AddrList} from "@/utils/api/zupu.js" 

	export default {
		name:"lpicker",
		props:{
			
		},
		data() {
			return {
				array:[[],[],[],[],[]],//省市区
				pickerValue:[0,0,0,0,0],//选中的下标
			}
		},
		async created(){
			await this.getAddressListfun(false,-1);
		},
		methods:{
			bindPickerChange(e){ //选择省市区 点击确定
				let trueAddr='',
				value=e.detail.value,//选中的下标
				num=0; 
				for( let i=0;i<value.length;i++){
					if(value[i]==0){
						break;
					}else{
						num++;
					}
				}
				//选了两极以上先清掉之前的
				if(num>2){
					
					this.$emit("clearelech",{})
				}
				let rnobj = {
					province_id:"",
					city_id:"",
					area_id:"",
					town_id:"",
					village_id:"",
				};
				//解析 文字和ID
				if(num==value.length || num>=3){//至少选择三级
					for(let index=0;index<num;index++){
						let item = this.array[index];
						if(index==0){
							trueAddr=trueAddr+''+item[value[index]].name;
						}else{
							trueAddr=trueAddr+','+item[value[index]].name;
						}
						
						if(index==0){
							rnobj.province_id = item[value[index]].value
						}else if(index==1){
							rnobj.city_id = item[value[index]].value
						}else if(index==2){
							rnobj.area_id = item[value[index]].value
						}else if(index==3){
							rnobj.town_id = item[value[index]].value
						}else if(index==4){
							rnobj.village_id = item[value[index]].value
						}
					}
					rnobj.text = trueAddr;
					this.$emit("input",trueAddr)
					this.$emit("select",rnobj)
				}
				
			},
			columnchange(e){ //选择某个地区
				let array=this.array;//省市区 数组
				let column=e.detail.column; //0省 1市 2区 3街道
				let index=e.detail.value; //下标
				let obj=array[column][index];//停留选中的数据
				this.pickerValue[column]=index;//选中的这项下标添加进去
				if(column==0){//监听的是省
					if(index!=0){
						if(array[1].length!=0){
							this.$set(this.array,1,[]);//将市数据清除
							this.$set(this.array,2,[]);//将区数据清除
							this.$set(this.array,3,[]);
							this.$set(this.array,4,[]);
							this.$set(this.pickerValue,1,0);//将选中数据清除
							this.$set(this.pickerValue,2,0);//将选中数据清除
							this.$set(this.pickerValue,3,0);//将选中数据清除
							this.$set(this.pickerValue,4,0);//将选中数据清除
						}else{
							
						}
						this.getAddressListfun(obj.value,column);
					}else{
						this.$set(this.array,1,[]);//选中到请选择去了
						this.$set(this.array,2,[]);
						this.$set(this.array,3,[]);
						this.$set(this.array,4,[]);
					}
				}else if(column==1){//监听的是? 市 1 
						this.$set(this.array,2,[]);//将区数据清除
						this.$set(this.array,3,[]);
						this.$set(this.array,4,[]);
						this.$set(this.pickerValue,2,0);//将选中数据清除
						this.$set(this.pickerValue,3,0);//将选中数据清除
						this.$set(this.pickerValue,4,0);//将选中数据清除
						this.getAddressListfun(obj.value,column);
				}else if(column==2){//监听的是? 区县  2
						this.$set(this.array,3,[]);
						this.$set(this.array,4,[]);
						this.$set(this.pickerValue,3,0);//将选中数据清除
						this.$set(this.pickerValue,4,0);//将选中数据清除
						this.getAddressListfun(obj.value,column);
				}else if(column==3){//监听的是?   3
						this.$set(this.array,4,[]);
						this.$set(this.pickerValue,4,0);//将选中数据清除
						this.getAddressListfun(obj.value,column);
				}else if(column==4){//监听的是?   3
					
				}
			},
			async getAddressListfun(pid,column){ //省市区
				uni.showLoading({title:'请稍后...'});
				let obj={pid:0,ParentId:0,name:'请选择'};
				let can = {};
				if(column==0){
					can.province_id = pid;
				}
				if(column==1){
					can.city_id = pid;
				}
				if(column==2){
					can.area_id = pid;
				}
				if(column==3){
					can.town_id = pid;
				}
				let res=await AddrList({
					...can,
				});
				if(res.code==1){
					uni.hideLoading();
					res.data.unshift(obj);
					if(pid || pid===0){ //一开始请求省
						if(column==0){ //选则了省 请求出了市的数据
							this.$set(this.array,1,res.data);
						}else if(column==1){  //选则了市 请求出了区的数据
							this.$set(this.array,2,res.data);
						}else if(column==2){
							this.$set(this.array,3,res.data);
						}else if(column==3){
							this.$set(this.array,4,res.data);
						}else if(column==4){
							
						}
					}else if(column==-1){
						this.$set(this.array,0,res.data);
						this.$set(this.array,1,[]);
						this.$set(this.array,2,[]);
						this.$set(this.array,3,[]);
						this.$set(this.array,4,[]);
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	
</style>